<style lang="stylus" scoped>
  .container
    padding: 0 1.25rem 4rem 1.25rem;
    box-sizing: border-box;
    .player
      width: 100%;
      text-align: center;
      padding-top: 1rem;
      img 
        border-radius: 50%;
        border: .2rem solid #e99e35;
        width: 20%;
      p
        font-size: 1.25rem;
        color: white;
      a 
        font-size: 1.2rem;
        color: #fff;
        i 
          font-size: 1.2rem;
          color: #fff;
    .functionList
      box-sizing: border-box;
      margin-top: 1.5rem!important;
      padding: .5rem 1rem;
      box-shadow: 0 0 0.4rem rgba(0,114,255,.3);
      border: 1px solid #a18b5f;
      border-radius: .8rem;
      background-color: rgba(0,0,0,.5);
      a 
        display: flex;
        text-align: center;
        color: #fff;
        font-size: 1.4rem;
        margin: 1.2rem auto;
        i 
          height: 2rem;
          line-height: 2rem;
          width: 2rem;
          font-size: 2rem;
          font-weight: bold;
          text-align: center;
          &:first-child
            margin-right: 1rem;
        h6 
          flex 1
          text-align left 
  .sign-out
    position: absolute;
    left: 5%;
    bottom: 5.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 4rem;
    line-height: 4rem;
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    background: linear-gradient(to bottom,#c3aa65,#907326);
    border-radius: .5rem;
    bottom: 5.5rem;
    color: white;
</style>

<template>
  <div class="choose">
    <div class="container">
      <div class="functionList mt15">         
        <a @click="this.$parent.change">
          <i class="iconfont icon-icon-wallet"></i>
          <h6>钱包</h6>
          <i class="iconfont icon-c-ar"></i>
        </a>
        <a class="changePwdBtn" @click="rechargebtn">
          <i class="iconfont icon-suo"></i>
          <h6>修改密码</h6>
          <i class="iconfont icon-c-ar"></i>
        </a>
        <a class="invist" @click="change">
          <i class="iconfont icon-zhuce"></i>
          <h6>邀请注册</h6>
          <i class="iconfont icon-c-ar"></i>
        </a>
      </div>
    </div>
    <a class="sign-out">退出</a>
    <mymask v-show="recharge"></mymask>
    <myfrom v-show="recharge"></myfrom>
  </div>
</template>

<script>
import mymask from '../components/mask'
import myfrom from '../components/myfrom'
export default {
  data(){
    return {
      recharge:false
    }
  },
  components:{
    mymask,
    myfrom
  },
  methods:{
    change(){
      this.$router.push("/invitation")
    },
    rechargebtn(){
      return this.recharge = !this.recharge
    },
  }
}
</script>
